<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="js/bootstrap.min.js" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
	<link rel="shortcut icon" href="img/logo.jpg">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
	<link type="text/css" rel="Stylesheet" href="css/Main.css" />
	
	
    <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
    <script type="text/javascript" src="js/bootstrap-transition.js"></script>
    <script type="text/javascript" src="js/bootstrap-alert.js"></script>
    <script type="text/javascript" src="js/bootstrap-modal.js"></script>
    <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
    <script type="text/javascript" src="js/bootstrap-scrollspy.js"></script>
    <script type="text/javascript" src="js/bootstrap-tab.js"></script>
    <script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
    <script type="text/javascript" src="js/bootstrap-popover.js"></script>
    <script type="text/javascript" src="js/bootstrap-button.js"></script>
    <script type="text/javascript" src="js/bootstrap-collapse.js"></script>
    <script type="text/javascript" src="js/bootstrap-carousel.js"></script>
    <script type="text/javascript" src="js/bootstrap-typeahead.js"></script>
    <script type="text/javascript" src="js/bootstrap-affix.js"></script>
    <script type="text/javascript" src="js/application.js"></script>
    <script type="text/javascript" src="js/Main.js"></script>
	<style type="text/css">
		.navbar{
			background-color:#999999;
		
		}
		body{
			background-color:#F3F1EC;
		
		
		.span6{
			border: 1px solid #DADEE5;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			margin: 0;
			padding: 15px 30px;
			height:auto;
			
		}
		#word{
			background:#F0F5F8;
		    
		}
		
		
	</style>
</head>
<body>
	<div id="container">
		<%@ include file="top.jsp"%>
		<div id="content">
			
			<div id="left" class="span3">
				<jsp:include page="lefttop.jsp">
					<jsp:param value="task" name="tag"/>
				</jsp:include>
				<%@ include file="leftdown.jsp" %>
			</div>
			
			<div class="span6" >
				<div id="word" style="background:#F0F5F8;border: 1px solid #DADEE5;border-top-left-radius: 5px;border-top-right-radius: 5px;margin: 0;padding: 15px 30px;">
					<h5>Your upcoming tasks</h5>
					
				</div>
				
				<div class="list" style="float: left;position: relative;background:#fff;font-size: 16px;overflow: hidden;padding: 20px;min-height:500px;">
					<div class="filter" style="padding-left:20px;margin-bottom:10px;">						  							
						Showing all  	
						<span class="dropdown">
							<a href=""class="dropdown-toggle" data-toggle="dropdown">
								upcoming tasks
							</a>
							<ul class="dropdown-menu">
						  	  <li><a href="task.action?q_like_state=">upcoming task</a></li>
						  	  <li><a href="task.action?q_like_state=">completed task</a></li>
						  	  <li><a href="#">upcoming task</a></li>
						  	</ul>
					  	</span>
						in 
						<span class="dropdown">
							<a href=""class="dropdown-toggle" data-toggle="dropdown">
								all categories
							</a>
							<ul class="dropdown-menu">								
								<c:forEach items="${typelist}" var="type">
									<li>
						  	  			<a href="task.action?q_like_type=${type.keya}&q_like_userid=${session.nowUser.id}">
						  	  				${type.keya}
						  	  			</a>						  
						  	  		</li>
								</c:forEach>												  	  
						  	</ul>
					  	</span>
					</div>
					<div class="ablock" style="width:420px;">

						<ul type="none" class="nav nav-list bs-docs-tooltip-examples ">											
							<c:forEach items="${page.result}" var="task">
								<li style="margin-bottom:1px ;" id="delcont">
									
									<span rel="tooltip"  class="tip" data-placement="right" title="修改任务">
										<span class="dropdown">
										<a href="task.action?id=${task.id }"class="dropdown-toggle" data-toggle="dropdown">			
												<input type="checkbox"  style="height:20px;width:20px;"/>															
										</a>
										<span style="background:green">${task.type}&nbsp;</span>&nbsp;&nbsp;${task.cont}
										<ul class="dropdown-menu">
											<li>
												<form action="addtask.action" class="well form-vertical" method="post">
													<input type="hidden" name="user.username" value="${session.nowUser.username }"/>
													add a new task<input type="text" name="task.cont" value="${task.cont }"/>
													When's it start?<input type="text" class="datepickers" name="task.starttime" value="${task.starttime }"/>
													When's it end?<input type="text" class="dates" name="task.endtime" value="${task.endtime }"/>
													
													Choose a category
													<div class="controls">
														<select id="multiSelect" name="task.type">
															<option >${task.type }</option>													
															<c:forEach items="${typelist}" var="type">
																<option>${type.keya}</option>
															</c:forEach>
														</select>
													</div>
													<input type="hidden" name="task.userid" value="${session.nowUser.id }"/>
													<input type="hidden" name="task.id" value="${task.id }"/>
													<input type="checkbox" name="task.group"/> Let everyone see this task<br>
													<hr>
													<button type="submit" id="btnSubmit" class="btn btn-primary btn-mini">Add this task</button>
													<button class="btn btn-mini" data-toggle="dropup">Cancel</button>								
												</form>
											</li>										
										</ul> 
										</span>
									</span>
									&nbsp;&nbsp;
									<sapn rel="tooltip"  class="tip" data-placement="right" title="删除任务">
										<a id="del" >
											<i class="icon-trash"></i>
										</a>								
									</sapn>
									<a href="deltask.action?id=${task.id}&user.username=${session.nowUser.username}" id="deltask" class="forward"></a>
								</li>
							</c:forEach>
						</ul>
					</div>																																						
				</div>								
			</div>
			<div class="span3">
				<div class="taskbox" style="background:#f8f8f8;">
					<div class="boxcontent" style=" padding: 12px 15px;margin: 0;border:1px solid #DADEE5;">
						<p>Your upcoming tasks</p>
						<hr style="margin:5px;"/>
						<p style="font-size:12px;">You can create tasks via email by using your create-a-task-by-email dropbox addresses. <br />
							<br />Subscribe to your iCalendar task feed to see Highrise tasks on your Backpack Calendar, Apple iCal, Mozilla Calendar or other program that supports the iCalendar format. 
						
						</p>
						
					</div>
				
				</div>
			
			</div>
					
		</div>
	
	</div>
	<script type="text/javascript">
		$(function () {  
								
			$(".tip").tooltip();
			$('.dropdown-toggle2').dropdown();
			$("#del").click(function(){
				$("#delcont").fadeOut(2000,function(){
					$("#deltask").click();
				});
				
			});		
		});  
		$(function(){
			$(".datepickers").datepicker({
				minDate:0			
				});
			$(".dates").datepicker({
				minDate:0				
			});
		});		
	</script>	
</body>
</html>